<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>评论管理</el-breadcrumb-item>
      <el-breadcrumb-item>评论列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            placeholder="请输入内容"
            v-model="query"
            clearable
            @clear="getCommnetList"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getCommnetByName"
            ></el-button>
          </el-input>
        </el-col>
      </el-row>
      <el-table :data="commentlist" stripe border>
        <el-table-column type="index"></el-table-column>
        <el-table-column
          label="用户昵称"
          prop="nickname"
          align="center"
        ></el-table-column>
        <el-table-column
          label="手机号"
          prop="phone"
          align="center"
        ></el-table-column>
        <el-table-column
          label="评语"
          prop="content"
          align="center"
        ></el-table-column>
        <el-table-column label="评分" prop="score" align="center">
          <template slot-scope="scope">
            <el-rate v-model="scope.row.score" show-text> </el-rate>
          </template>
        </el-table-column>
        <el-table-column label="评论时间" prop="time" align="center">
          <template slot-scope="scope">
            <p>{{ scope.row.time | dateFormat }}</p>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <!-- 修改按钮 -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="showEditDialog(scope.row.id)"
            ></el-button>
            <!-- 删除按钮 -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="removeById(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 修改用户评论-->
    <el-dialog
      title="修改用户评论"
      :visible.sync="editDialogVisible"
      width="50%"
      @close="editDialogClosed"
    >
      <!-- 内容主体区域 -->
      <el-form
        :model="editForm"
        :rules="editFormRef"
        ref="editFormRef"
        label-width="70px"
      >
        <el-form-item label="电影名" prop="content" label-width="100px">
          <el-input v-model="editForm.content"></el-input>
        </el-form-item>
        <el-form-item label="电影名" prop="score" label-width="100px">
          <el-input v-model="editForm.score"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateComment">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      query: "",
      commentlist: [],
      editDialogVisible: false,
      editForm: {},
      editFormRef: {
        content: [{ required: true, message: "请输入评语", trigger: "blur" }],
        score: [{ required: true, message: "请输入评分类型", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getCommnetList();
  },
  methods: {
    async getCommnetList() {
      const { data: res } = await this.$http.get("published");
      if (res.status !== 200) return this.$message.error("获取失败");
      this.$message.success("获取成功");
      this.commentlist = res.data;
    },
    async getCommnetByName() {
      const { data: res } = await this.$http.get(
        "publishedByName?nickname=" + this.query
      );
      if (res.status !== 200) return this.$message.error("获取失败");
      this.commentlist = res.data;
    },
    async showEditDialog(id) {
      const { data: res } = await this.$http.get("published/" + id);

      if (res.status != 200) {
        this.$message.error("获取电影失败！");
      }
      this.editForm = res.data;

      this.editDialogVisible = true;
    },
    async removeById(id) {
        //弹框询问用户是否删除数据
      const confirmResult = await this.$confirm(
        '此操作将永久删除该评论, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).catch((err) => err)
      // console.log(confirmResult);
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }

      const { data: res } = await this.$http.delete('published/' + id)
      if (res.status !== 200) {
        return this.$message.error('删除评论失败！')
      }

      this.$message.success('删除评论成功！')
      this.getCommnetList()
    },
    editDialogClosed() {
      this.editDialogVisible = false;
    },
    updateComment() {
      this.$refs.editFormRef.validate(async (valid) => {
        if (!valid) return;
        //发起修改用户信息的数据请求
        const { data: res } = await this.$http.put("publishedId", {
          id: this.editForm.id,
          content: this.editForm.content,
          score: this.editForm.score
        });
        if (res.status !== 200) {
          return this.$message.error("更新评论信息失败！");
        }

        //关闭对话框
        this.editDialogVisible = false;
        //刷新列表
        this.getCommnetList();
        //提示用户修改成功
        this.$message.success("更新评论信息成功！");
      });
    },
  },
};
</script>

<style>
</style>